<template>
  <div class="idcard">

    <div style="padding-top: 10px;height: 120px;">
      <van-cell-group>
        <van-field
          v-model="message"
          label="反馈"
          type="textarea"
          placeholder="请输入内容"
          rows="1"
          :autosize="size"
        />
      </van-cell-group>
    </div>

    <div class="flex">
      <div class="imgbox"></div>
      <div class="uploader" >
        <van-uploader :after-read="onRead">
          <van-icon name="photograph" />
          <span>添加图片</span>
        </van-uploader>
      </div>
    </div>

    <div class="tips">带<span>*</span>为必填字段</div>
    <div
      class="submit"
      @click="submit"
    ><button>提交</button></div>
  </div>
</template>
<script>
import { addBankcard,bankList } from "../../api/user";
import { Toast,Dialog } from "vant";
export default {
  data() {
    return {
      message:'',
      size:{ minHeight: 100 },
      imageurl_arr: []
    };
  },
  methods: {
    onRead(file) {
      let fd = new FormData();
      fd.append("image", file.file);
      fileUploadOne(fd).then(res => {
        if (res.status == 200) {
          this.imageurl_arr.push(res.data.imageurl);
          const img = document.createElement("img");
          img.src = res.data.imageurl;
          const imageBox = document.querySelector(".imgbox");
          imageBox.appendChild(img);
          this.$store.commit("setTaskData", {
            task_id: this.$route.query.id,
            evidence_img: this.imageurl_arr
          });
        }
      });
    },

    submit() {  //添加
      if ( this.card.bankname == "" || this.card.cardholder_name == "" || this.card.card_no == "" ) {
        Toast("必填项不为空");
        return;
      }
      // console.log(this.card)
      addBankcard(this.card).then(res => {
        Toast(res.message);
        if(res.status == 200) {
          setTimeout(() => {
            this.$router.push({
              path: "/cardList"
            });
          }, 1800);
        }
      });

    }
  },
  created() {

  }
};
</script>
<style lang="scss">
.idcard {
  width: 100%;
  padding-bottom: 48px;
  background-color: #f5f5f5;

  .uploader {
    background-color: #ddd;
    margin-left: 15px;
    margin-top: 15px;
    width: 70px;
    height: 70px;
    border: 1px dashed #eee;
    text-align: center;
    border-radius: 5px;
    /*margin: 0 15px;*/
    .van-uploader {
      width: 100%;
      height: 100%;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    img {
      width: 25px;
      margin-bottom: 5px;
    }
    span {
      // font-size: 100px;
      // font-weight: 100;
      color: #999;
      display: inline-block;
      height: 20px;
    }
  }
  .tips {
    padding: 15px;
    span {
      color: red;
    }
    color: #323233;
  }
  .submit {
    width: 90%;
    margin: 0 auto;
    button {
      width: 100%;
      height: 40px;
      border: none;
      outline: none;
      border-radius: 5px;
      color: #fff;
      background-color: #e71434;
    }
  }
}
</style>


